<template>
  <div class="h100">
    <div class="home-bac">
      <img src="~@/assets/reception/background1.png" alt="" />
    </div>
    <div class="home-main">
      <div class="service">
        <span class="service-title">发布服务</span>
        <div class="service-bac">
          <div id="components-form-demo-vuex">
            <a-form :form="form" @submit="handleSubmit">
              <a-form-item label="您的姓名">
                <a-input
                  v-decorator="[
                    'MC',
                    {
                      rules: [{ required: true, message: '请输入您的姓名!' }],
                    },
                  ]"
                />
              </a-form-item>
              <a-form-item label="您的电话">
                <a-input
                  v-decorator="[
                    'Phone',
                    {
                      rules: [
                        { required: false, message: '请输入您的电话!', whitespace: true, trigger: 'change' },
                        { validator: validatePhone },
                      ],
                    },
                  ]"
                /> </a-form-item
              ><a-form-item label="您的地址">
                <a-input
                  v-decorator="[
                    'DZ',
                    {
                      rules: [{ required: true, message: '请输入您的地址!' }],
                    },
                  ]"
                /> </a-form-item
              ><a-form-item label="服务时间">
                <a-range-picker
                  :show-time="{ format: 'HH:mm' }"
                  format="YYYY-MM-DD HH:mm"
                  :value="timevalue"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onChange"
                  @ok="onOk"
                >
                  <template slot="renderExtraFooter"> extra footer </template>
                </a-range-picker> </a-form-item
              ><a-form-item label="服务项目">
                <a-input
                  v-decorator="[
                    'NAME',
                    {
                      rules: [{ required: true, message: '请输入服务项目!' }],
                    },
                  ]"
                /> </a-form-item
              ><a-form-item label="其他服务">
                <a-input v-decorator="['MS']" />
              </a-form-item>
            </a-form>
            <a-button type="primary" html-type="submit" @click="handleSubmit"> 提交 </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validPassword, validAccountNumber, validChineseChar, validIDCard, validTelphone } from '@/utils/validate'
import { getAddFWFBApi } from '@/api/resService'

export default {
  name: 'pubServices',
  data() {
    return {
      form: this.$form.createForm(this, { name: 'user' }),
      dateString: [],
      timevalue:[],
    }
  },
  computed: {
    username() {
      return this.$store.state.username
    },
  },
  watch: {
    username(val) {
      console.log('this.$store.state.username: ', val)
      this.form.setFieldsValue({ username: val })
    },
  },
  created() {
    this.form = this.$form.createForm(this, {
      onFieldsChange: (_, changedFields) => {
        this.$emit('change', changedFields)
      },
      mapPropsToFields: () => {
        return {
          username: this.$form.createFormField({
            value: this.username,
          }),
        }
      },

      onValuesChange: (_, values) => {
        console.log(values)
        // Synchronize to vuex store in real time
        // this.$store.commit('update', values)
      },
    })
  },
  methods: {
    onChange(value, dateString) {
      this.timevalue = value;
      this.dateString = dateString[0] + ' 到 ' + dateString[1]
    },
    onOk(value) {
      console.log('onOk: ', value)
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      }
      if (!validTelphone(value)) {
        callback(new Error('联系电话输入有误，请重新输入'))
      }
      callback()
    },
    handleSubmit() {
    const {
      form: { validateFields, $message },
    } = this
    validateFields({ force: true }, (err, values) => {
      console.log('values', err, values)
      getAddFWFBApi(
        Object.assign({}, values, {
          StartSJ: this.dateString,
        })
      )
        .then((res) => {
          if (res.code === 200) {
            this.$notification.open({
              message: '提交成功',
            });
            this.form.resetFields();
          } else {
            this.$notification.open({
              message: '提交失败,' + res.msg,
              icon: <a-icon type="smile" style="color: #f00" />,
            });
            this.form.resetFields()
            this.timevalue = []
          }
        })
        .catch((err) => {
          $message.error(err, 3)
        })
        .finally(() => {
          this.confirmLoading = false
        })
    })
  },
  },

}
</script>

<style lang="less" scoped>
.home-bac {
  img {
    height: 230px;
    width: 100%;
  }
}
.home-main {
  margin-top: 30px;
  .service {
    margin: 0 auto;
    height: 380px;
    width: 1600px;
    // padding: 0 20px;
    .service-bac {
      height: 100%;
      width: 1000px;
      margin: 0 auto;
      background-image: url(../../../assets/reception/pubServices/pubServicesbac.png);
      background-repeat: no-repeat;
      background-size: 1000px 400px;
    }
    .service-title {
      color: #1e50ae;
      font-size: 24px;
      display: block;
      width: 100%;
      border-bottom: 2px solid #1e50ae;
    }
    .service-search {
      margin: 20px auto;
      margin-top: 0;
      padding-top: 20px;
      width: 1500px;
      .ant-input-group .ant-input {
        border: none;
        background: #edf2f5;
      }
    }
    .service-hot {
      margin: 0 20px;
      img {
        height: 24px;
      }
    }
  }
}
.ant-form {
  display: flex;
  flex-wrap: wrap;
  .ant-form-item {
    width: 45%;
    margin: 0 20px;
  }
}
.ant-btn {
  display: block;
  margin: 20px auto;
  background: #674de8;
}
</style>
